<template>
	<div>
		<!-- vant导航栏 -->
		<van-nav-bar style="background-color: #3090EC;">
			<template #left>
				<van-icon @click="back" color="white" name="arrow-left" />
			</template>
			<template #title>
				<span style="color: white;">登录</span>
			</template>
		</van-nav-bar>
		<!-- vant表单 -->
		<van-form>
			<van-field
				v-model="username"
				name="账号"
				label="账号"
				placeholder="手机号"
				:rules="[{ required: true, message: '请填写账号' },{pattern:/^[1][3,5,6,7,8,9][0-9]{9}$/ , message: '请输入正确的11位手机号'}]"
				>
			</van-field>
			<van-field
				v-model="password"
				:type="isPassword"
				name="密码"
				label="密码"
				placeholder="密码"
				:rules="[{ required: true, message: '请填写密码' },{pattern: /^\w{6,}$/,message:'密码不少于6位'}]"
				>
				<template #right-icon>
					<van-icon :name="eyeName" @click="onPassword"/>
				</template>
			</van-field>
			<van-field
				v-model="code"
				name="验证码"
				label="验证码"
				placeholder="验证码"
				:rules="[{ required: true, message: '请填写验证码' }]"
				>
				<template #right-icon>
					<van-image
					width="80px"
					height="30px"
					:src="codeUrl" @click="getCode"
					/>
					<!-- <img :src="codeUrl" @click="getCode" class="login-code-img"/> -->
				</template>
			</van-field>
			<div style="margin: 16px;">
				<van-button @click="onSubmit" round block type="info" native-type="submit">
				登录
				</van-button>
				<span @click="onPassword" style="font-size: 20px;" class="iconfont icon-view"></span>
			</div>
		</van-form>
		<div style="float: left;margin-left: 20px;">
			<router-link to="/updatePassword">忘记密码</router-link>
		</div>
		<div style="float: right;margin-right: 20px;">
			<router-link to="/register">没有账号？点击注册</router-link>
		</div>
	</div>
</template>

<script>
import { NavBar, Icon, Image } from 'vant'
import { login,getCodeImg } from '@/api/wxLogin.js'
import store from '@/store'
export default {
  components: {
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
	[Image.name]:Image
  },
  data() {
    return {
      username: '',
      password: '',
	  code: '',
      uuid: '',
	  codeUrl: '',
      isPassword: 'password', // 密码的type类型
      isText: true,
	  eyeName : 'closed-eye'
    }
  },
  watch:{
    $route(to, from) {
      console.log(window.location.href);
      console.log(this.$route.path);
      console.log(this.$route.params);
    }
  },
  created() {
    this.getCode();
  },
  methods: {
	getCode() {
      getCodeImg().then(res => {
        this.codeUrl = "data:image/gif;base64," + res.img;
        this.uuid = res.uuid;
      });
    },
    onSubmit() { // 点击登录
      // 如果不符合登录条件则不会继续执行
      if (this.username.trim() === '') {
        return
      }
      if (!this.username.match(/^[1][3,5,6,7,8,9][0-9]{9}$/)) {
        return
      }
      if (!this.password.match(/^\w{6,}$/)) {
        return
      }
      login({username:this.username,password:this.password,code:this.code,uuid:this.uuid}).then(res =>{
        console.log('登陆成功',res);
		// 把接口返回的token 用户信息 微信信息全部挂在store中 给token做缓存
        store.commit('setH5UserInfo', res.data)
        // 设置为已登录
        // store.dispatch('setUserInfo')
		this.$router.push({
			path: '/home'
		})
      }).catch(error=>{
		//   console.log('error',error)
	  })
	  this.getCode()
    },
    onPassword() { // 点击切换密码的type类型
      this.isText = !this.isText
      if (this.isText) {
        this.isPassword = 'password'
		this.eyeName = 'closed-eye'
		
      } else {
        this.isPassword = 'text'
		this.eyeName = 'eye-o'
      }
    },
    back() { // 返回我的页面
      this.$router.push({
        path: '/home'
      })
    }
  }
}
</script>

<style>
</style>
